<template>
    <div class="" v-if="state !== 'hidden'">
        <el-form
            ref="form"
            :model="form"
            :label-width="'write' == state ? '115px' : 'auto'"
            :class="'write' == state ? 'write-form' : 'read-form'"
            :label-position="'write' == state ? 'top' : 'left'"
        >
            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>车辆信息</span>
                    <span></span>
                </div>

                <CarBaseInfo :form="form"></CarBaseInfo>
            </div>

            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>GPS排查信息反馈</span>
                    <span></span>
                </div>

                <el-row :gutter="30">
                    <el-col :span="8">
                        <el-form-item label="GPS状态:" prop="gpsState">
                            <el-input
                                v-if="'write' == state"
                                v-model="form.gpsState"
                                disabled
                            ></el-input>
                            <span v-else>{{ form.gpsState | filterNull }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item
                            label="状态持续时长:"
                            prop="dismantleTime"
                        >
                            <el-input
                                v-if="'write' == state"
                                v-model="form.dismantleTime"
                                disabled
                            ></el-input>
                            <span v-else>{{
                                form.dismantleTime | filterNull
                            }}</span>
                        </el-form-item>
                    </el-col>
                    <!--                    <el-col :span="8">-->
                    <!--                        <el-form-item label="离线设备:" prop="expireEquipmentNo">-->
                    <!--                            <el-input v-if="'write' == state" v-model="form.expireEquipmentNo" disabled></el-input>-->
                    <!--                            <span v-else>{{form.expireEquipmentNo|filterNull}}</span>-->
                    <!--                        </el-form-item>-->
                    <!--                    </el-col>-->
                    <el-col :span="8">
                        <el-form-item label="离线原因:" prop="offLineCause">
                            <el-input
                                v-if="'write' == state"
                                v-model="form.offLineCause"
                                disabled
                            ></el-input>
                            <span v-else>{{
                                form.offLineCause | filterNull
                            }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="报警类型:" prop="alarmType">
                            <el-input
                                v-if="'write' == state"
                                v-model="form.alarmType"
                                disabled
                            ></el-input>
                            <span v-else>{{
                                form.alarmType | filterNull
                            }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="报警时间:" prop="alarmTime">
                            <el-input
                                v-if="'write' == state"
                                v-model="form.alarmTime"
                                disabled
                            ></el-input>
                            <span v-else>{{
                                form.alarmTime | filterNull
                            }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="30">
                    <el-col :span="8">
                        <el-form-item
                            label="反馈原因:"
                            prop="feedbackCause"
                            :rules="
                                'write' == state
                                    ? {
                                          required: true,
                                          message: '请选择反馈原因',
                                          trigger: 'blur',
                                          validator: (rule, value, callback) =>
                                              validData(
                                                  rule,
                                                  form.feedbackCause,
                                                  callback
                                              ),
                                      }
                                    : {}
                            "
                        >
                            <el-select filterable
                                v-if="'write' == state"
                                v-model="form.feedbackCause"
                                clearable
                                style="width: 100%"
                            >
                                <template
                                    v-for="dict in dict.type
                                        .gps_feedback_reason"
                                >
                                    <el-option
                                        :label="dict.label"
                                        :value="dict.value"
                                        :key="dict.value"
                                    ></el-option>
                                </template>
                            </el-select>
                            <span v-else
                                ><dict-tag
                                    :options="dict.type.gps_feedback_reason"
                                    :value="form.feedbackCause"
                            /></span>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item
                            label="是否继续排查:"
                            prop="isTroubleshoot"
                            :rules="
                                'write' == state
                                    ? {
                                          required: true,
                                          message: '请选择是否继续排查',
                                          trigger: 'blur',
                                          validator: (rule, value, callback) =>
                                              validData(
                                                  rule,
                                                  form.isTroubleshoot,
                                                  callback
                                              ),
                                      }
                                    : {}
                            "
                        >
                            <el-select filterable
                                v-if="'write' == state"
                                v-model="form.isTroubleshoot"
                                clearable
                                style="width: 100%"
                            >
                                <el-option label="否" :value="'0'"></el-option>
                                <el-option label="是" :value="'1'"></el-option>
                            </el-select>
                            <span v-else>{{
                                0 == form.isTroubleshoot
                                    ? "否"
                                    : 1 == form.isTroubleshoot
                                    ? "是"
                                    : "--"
                            }}</span>
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item
                            label="上传照片:"
                            prop="imageOss"
                            style="width: 100%"
                        >
                            <ImageCommon
                                :disabled="'write' != state"
                                :up-type="2"
                                info="选择附件"
                                :limit="9"
                                v-model="form.imageOss"
                            ></ImageCommon>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>备注</span>
                    <span></span>
                </div>
                <el-row :gutter="30">
                    <el-col :span="24">
                        <el-form-item
                            label="备注:"
                            prop="remark"
                            :rules="
                                'write' == state
                                    ? {
                                          required: 2 == form.renewFlag,
                                          message: '请输入备注',
                                          trigger: 'blur',
                                          validator: (rule, value, callback) =>
                                              validData(
                                                  rule,
                                                  form.remark,
                                                  callback
                                              ),
                                      }
                                    : {}
                            "
                        >
                            <el-input maxlength="500"
                                v-if="'write' == state"
                                type="textarea"
                                v-model="form.remark"
                                clearable
                                placeholder="请输入备注"
                            ></el-input>
                            <span v-else>{{ form.remark | filterNull }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
        </el-form>
    </div>
</template>

<script>
import moment from "moment";
import CarBaseInfo from "@/views/GPSManage/components/carBaseInfo.vue";

export default {
    components: { CarBaseInfo },
    dicts: ["quota_rent_type", "gps_feedback_reason"],
    props: {
        value: {
            default: {},
        },
        state: {
            default: "write",
        },
    },
    computed: {
        form: {
            get() {
                return this.value;
            },
            set(value) {
                this.$emit("input", value);
            },
        },
    },
    watch: {},
    data() {
        return {
            renewYearList: [
                {
                    label: "1年",
                    value: 1,
                },
                {
                    label: "2年",
                    value: 2,
                },
                {
                    label: "3年",
                    value: 3,
                },
                {
                    label: "4年",
                    value: 4,
                },
                {
                    label: "5年",
                    value: 5,
                },
            ],
        };
    },
    mounted() {
        this.$nextTick(() => {
            if ("write" == this.state) {
                this.form.imageOss = "";
            }
        });
    },
    methods: {
        renewSel(val) {
            if (this.form.renewYear && this.form.renewStartTime) {
                let endtime = moment(
                    this.form.renewStartTime,
                    "YYYY-MM-DD HH:mm:ss"
                )
                    .add(this.form.renewYear, "year")
                    .format("YYYY-MM-DD HH:mm:ss");
                this.$set(this.form, "renewEndTime", endtime);
            }
            this.$forceUpdate();
        },
        startChange(val) {
            if (this.form.renewYear && this.form.renewStartTime) {
                let endtime = moment(
                    this.form.renewStartTime,
                    "YYYY-MM-DD HH:mm:ss"
                )
                    .add(this.form.renewYear, "year")
                    .format("YYYY-MM-DD HH:mm:ss");
                this.$set(this.form, "renewEndTime", endtime);
            }
            this.$forceUpdate();
        },

        validData(rule, value, callback) {
            // console.log('aaa', rule, value, callback)
            if (rule.required && !value) {
                // this.$modal.msgError(`未填写${value}`);
                callback(new Error(rule.message));
            } else {
                callback();
            }
        },

        async valid() {
            // if(this.form.carList && this.form.carList.length>0){
            //     this.form.carIds = this.form.carList.map(item=>{
            //         return item.carId
            //     })
            //     this.form.workIds = this.form.carList.map(item=>{
            //         return item.id
            //     })
            // }else {
            //     this.form.carIds = [this.form.carId]
            //     this.form.workIds = [this.form.id]
            // }
            this.form.workId = this.form.id;

            return new Promise((resolve) => {
                if('write'==this.state){
                    this.$refs["form"].validate(valid => {
                        resolve(valid);
                    });
                }else {
                    resolve(true)
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
    padding: 0;
}

::v-deep .read-form .el-form-item__label-wrap,
::v-deep .read-form .el-form-item__content {
    margin-left: 0 !important;
}
.el-descriptions {
    margin: 0 -15px;
}
</style>
